import { clearStorage } from '@biz/index';
import { Button, Col, Form, Input, Row } from 'antd';
import React from 'react';
import LoginType from '@components/widgets/login-types';
import useLogin from '@hooks/use-login';
import '../style.less';

const RightLogin = () => {
    const [form] = Form.useForm();
    const { initCaptcha, captchaImg, onLoginFinish } = useLogin(form);
    React.useEffect(() => {
        form.setFieldsValue({
            userName: '',
            email: '',
            password: '',
        });
        // 情况缓存数据, 一定
        clearStorage();
    }, []);

    return (
        <div className="right-content-container">
            <LoginType />

            <div className="content-title">登录</div>
            <Form form={form} onFinish={onLoginFinish} wrapperCol={{ span: 14, offset: 0 }} layout={'vertical'} style={{ marginTop: '24px' }}>
                <Form.Item label="用户名：" name="userName" rules={[{ required: true, message: '用户名不能为空' }]}>
                    <Input placeholder="用户名" />
                </Form.Item>
                <Form.Item label="Email：" name="email" rules={[{ required: true, message: 'Email不能为空' }]}>
                    <Input placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    label="密码："
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '密码不能为空',
                        },
                    ]}
                >
                    <Input.Password placeholder="6-16位密码，区分大小写" />
                </Form.Item>
                <Form.Item
                    label="验证码："
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: '验证码不得为空',
                        },
                    ]}
                >
                    <Input placeholder="验证码" addonAfter={<img src={captchaImg} onClick={initCaptcha} />} />
                </Form.Item>
                <Row align="bottom">
                    <Col span={10}>
                        <Form.Item>
                            <Button type="primary" size="middle" className="content-btn" onClick={form.submit}>
                                登录 (直接点击)
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    );
};
export default RightLogin;
